<template>
<div ref="target" class="use-resize-observer">
<span v-text="text" />
</div>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {useResizeObserver} from "@vueuse/core";

defineOptions({
  name: "UseResizeObserver"
})
const target = ref<HTMLElement | null>(null)
const text = ref('')

useResizeObserver(target, (entry) => {
  const { width, height } = entry?.[0].contentRect
  text.value = `width: ${ width }, height: ${ height }`
})
</script>
<style scoped lang="css">
.use-resize-observer {
  position: relative;
  background: pink;
  width: 300px;
  height: 300px;
  resize: both;
  padding: 15px;
  overflow: auto;
}
</style>
